<template>
  <div class="container">
    <headComponent></headComponent>
    <div class="row" style="margin-top: 30px">
      <div class="col-xs-10 ">
        <div class="input-group pull-right" style="width: 200px">
          <input type="text" class="form-control" style="height: 30px;" placeholder="请输入关键字" v-model="sign">
          <span class="input-group-btn">
						<button class="btn btn-default btn-info btn-lg" type="submit" style="height: 30px;width: 40px;background-color: #F45809" @click="queryByName">
							<span class="glyphicon glyphicon-search" style="font-size: 15px;font-color:#FFFFFF"></span>
						</button>
					</span>
        </div>
      </div>
      <div class="col-xs-2">
        <div style="padding-left: 20px;font-size: 15px">
          <select style=" height: 30px;width: 90px;"v-on:change="selectType">
            <option value="证件">证件</option>
            <option value="眼镜">眼镜</option>
            <option value="钥匙">钥匙</option>
            <option value="贵重物品">贵重物品</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>
    </div>

    <div style="height: 880px;width: 1108px;border: 1px #E4E4E4 solid;margin-top: 20px">
      <div class="row" style="margin-top: 10px">
        <div class="col-xs-8 text-right" style="font-size: 13px;padding-top: 5px">
          <span class="glyphicon glyphicon-sort-by-attributes">&nbsp;时间升序</span>
        </div>
        <div class="col-xs-1 text-left" style="font-size: 13px;width: 110px;padding-top: 5px">
          <span class="glyphicon glyphicon-sort-by-attributes-alt">&nbsp;时间降序</span>
        </div>
        <div class="col-xs-2 text-center">
          <router-link to="/lostManagementFunctionPage">
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="background-color: #286090">
              <span class="glyphicon glyphicon-plus-sign" style="font-size: 13px;">&nbsp;发布</span>
            </button>
          </router-link>
<!--          <router-view></router-view>-->
        </div>
      </div>

      <div style="border: 1px #E4E4E4 solid;margin-top: 5px"></div>

      <div class="row" style="margin-left: 5px;">
        <div class="col-xs-3" style="margin-top: 15px;" v-for="item in info">
          <div style="height: 390px;width: 238px;border: 3px #EEEEEE solid" >
            <img v-bind:src="item.src" id="img" style="height: 240px;width: 232px">
            <div class="row" style="margin-top: 10px">
              <div class="col-xs-5 text-center" style="padding-right: 0px">
                <div style="font-size: 15px;font-weight: bold">物品名称:</div>
              </div>
              <div class="col-xs-7" style="padding-left: 0px">
                <div style="font-size: 15px;">{{item.lostPropertyName}}</div>
              </div>
            </div>

            <div class="row" style="margin-top: 10px">
              <div class="col-xs-5 text-center" style="padding-right: 0px">
                <div style="font-size: 15px;font-weight: bold">遗失日期:</div>
              </div>
              <div class="col-xs-7" style="padding-left: 0px">
                <div style="font-size: 14px;">{{item.time}}</div>
              </div>
            </div>

            <div class="row" style="margin-top: 10px">
              <div class="col-xs-5 text-center" style="padding-right: 0px">
                <div style="font-size: 15px;font-weight: bold">物品状态:</div>
              </div>
              <div class="col-xs-7" style="padding-left: 0px">
                <div style="font-size: 15px;">{{item.state}}</div>
              </div>
            </div>

            <div class="row" style="margin-top: 10px;margin-bottom: 30px">
              <div class="col-xs-5 text-center">
                <button type="button" class="btn btn-primary" style="background-color: #286090">
                  <span class="glyphicon glyphicon-trash" style="font-size: 15px;margin-top: 5px"></span>
                </button>
              </div>

              <div class="col-xs-7 text-center">
                  <div style="font-size: 15px;color: black;margin-top: 5px">
                    <button type="button" class="btn btn-default">
                      <span v-on:click="cli(item)">更多详情</span></button>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-3">

        </div>
      </div>

    </div>

    <div class="row">
      <div class="col-xs-12" style="margin-top: 30px">
        <div class="pull-right">
          <ul class="pagination">
            <li><a href="#" v-on:click="UpPage">上一页</a></li>
            <li><a href="#" v-on:click="firstLostPage">首页</a></li>
            <li><a href="#"v-on:click="lastLostPage">尾页</a></li>
            <li><a href="#" v-on:click="DownPage">下一页</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "lostManagementPage",
      data(){
          return{
            sign:'',
            currentPage:1,
            url:'',
            info:[],
            numPage:0
          }
      },
      created() {
          var self=this
          axios.get(this.rootUrl+"/info/LostInfo",{params:{
              currentPage:this.currentPage
            }})
          .then(function (resp) {
            console.log(resp.data)
            self.info=resp.data
          }),
            axios.get(this.rootUrl+"info/infoSize",{
              params:{type:"寻物启事"}
            })
            .then(function (resp) {
                // console.log(resp.data)
              self.numPage=Math.ceil(resp.data/8)
               // alert(self.numPage)
            })
      },
      methods:{
        selectType(event){
          console.log(event.target.value);
          var self=this
          axios
            .get(this.rootUrl+"/info/QueryByDivide",{params:{divide:event.target.value,type:'寻物启事'}})
            .then(function (response) {
            self.info = response.data
          })
        },
        queryByName(){
          var self=this
          axios
            .get(this.rootUrl+"/info/QueryByName",{params:{sign:this.sign,type:'寻物启事'}})
            .then(function (response){
            console.log(response.data)
            self.info = response.data
          })

        },
          cli(item){
            this.$router.push({name:'lostGoodsDetailsPage',params:{item:item}})
          },
          UpPage(){
            if (this.currentPage>1){
              this.currentPage--
              var self=this
              axios.get(this.rootUrl+"/info/LostInfo",{params:{
                  currentPage:this.currentPage
                }})
                .then(function (resp) {
                  self.info=resp.data
                })
            }else {
              alert("已经是首页了")
            }
          },
        firstLostPage(){
              this.currentPage=1;
            var  self=this
          axios.get(this.rootUrl+"/info/LostInfo",{params:{
              currentPage:this.currentPage
            }})
            .then(function (resp) {
              self.info=resp.data
            })
          // alert("到达首页")
        },
        lastLostPage(){
          this.currentPage=this.numPage
          var self=this
          axios.get(this.rootUrl+"/info/LostInfo",{params:{
              currentPage:this.currentPage
            }})
            .then(function (resp) {
              self.info=resp.data
            })
          // alert("到达尾页")
        },
        DownPage(){
          if (this.currentPage<this.numPage){
            this.currentPage++
            var self=this
            axios.get(this.rootUrl+"/info/LostInfo",{params:{
                currentPage:this.currentPage
              }})
              .then(function (resp) {
                self.info=resp.data
              })
          }else {
             alert("已经是尾页了")
          }
        }
      }

    }
</script>

<style scoped>
  #chang:hover{
    background-color: #EEEEEE;
  }
</style>
